import styled from 'styled-components';
import logoImg from '../../static/logo.png';
const color = '#ea6f5a';

export const HeaderWrapper = styled.div`
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
`;

export const HeaderCon = styled.div`
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  ul {
    float:right;
    li {
      float: left;
      margin:0 5px;
      a {
        display: block;
        line-height: 26px;
        padding: 15px;
        font-size: 15px;
        color: #969696;
        &.btn {
          float: right;
          margin-top: 8px;
          height: 38px;
          line-height: 38px;
          border-radius: 40px;
          padding: 0 20px;
          border: 1px solid ${color};
          color: ${color};
        }
        &.bg {
          background:${color};
          color: #fff;
        }
      }
    }
  }
`;

// 元素的属性可以使用attrs方法，传入一个对象设置属性
export const Logo = styled.a.attrs({
  href: '/test/'
})`
  width: 100px;
  height:56px;
  background-image:url(${logoImg});
  background-size:contain;
  float: left;
`;

export const HeaderC = styled.div`
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  ul {
    float: left;
    li a {
      font-size: 17px;
      color: #000;
      &:hover {
        background: #f5f5f5;
      }
    }
    .active a {
      color: ${color}
    }
  }
`;
export const SearchWrap = styled.div`
  float: left;
  position: relative;
  .slide-enter {
    transition: all .3s ease-out;
  }
  .slide-enter-active {
    width: 260px;
  }
  .slide-exit {
    transition: all .3s ease-out;
  }
  .slide-exit-active {
    width: 180px;
  }
  .iconfont {
    position: absolute;
    right: 5px;
    bottom: 4px;
    font-size: 16px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    &.active {
      color: #fff;
      background: #999;
    }
  }
`
export const HeadInput = styled.input.attrs({
  type: 'text',
  placeholder: '搜索'
})`
  float: left;
  margin-top: 8px;
  padding: 0 40px 0 20px;
  width: 180px;
  height: 38px;
  color: #999;
  font-size: 14px;
  border: 1px solid #eee;
  outline: none;
  border-radius: 40px;
  background: #eee;
  // transition: width .5s;
  // transition-delay: .1s;
  &.active {
    width: 260px;
  }
}`